<script setup lang="ts">
import { ref, shallowRef, onMounted } from "vue";
import * as echarts from "echarts";

const myChart = ref<HTMLElement | null>(null);
const myCharts = shallowRef<any>();

onMounted(() => {
  if (myChart.value) {
    myCharts.value = echarts.init(myChart.value);
    myCharts.value.setOption({
      title: {
        text: props.name,
        subtext: '单位（小时）',
      },
      tooltip: {
        trigger: 'axis',
        axisPointer: {
          type: 'line',
          lineStyle: {
            color: '#8BCEFF', // 蓝色
            width: 2, // 线的宽度
            type: 'solid', // 实线
          },// 坐标轴指示器，坐标轴触发有效
        },
        magicType : {show: true, type: ['line']},
        formatter: function (params: any) {
          const item = params[0];
          return `${props.month}月${item.name}：<span style="color: #3C8DF9">${item.data}小时</span>`;
        },
      },
      grid: {
        top: 60,
        bottom: 30, // 增加 top 值以腾出更多空间放置 y 轴名称
      },
      xAxis: {
        data: ['1日', '2日', '3日', '4日', '5日', '6日', '7日'],
        axisLabel: {
          rotate: 45, // 旋转45度
        },
      },
      legend: {
        data: ['学习时长'],
        icon: 'rect', // 设置图例标记为矩形
        itemWidth: 20, // 设置图例标记的宽度
        itemHeight: 3, // 设置图例标记的高度
        textStyle: {
          fontSize: 14, // 图例文字大小
          fontWeight: 'bold', // 图例文字加粗
        },
        right:10,
      },
      yAxis: {
        nameLocation: 'end',
        axisLabel: {
          formatter: '{value}', // 在标签上添加百分号
        },
        splitLine: {
          // 配置 Y 轴的分隔线
          lineStyle: {
            type: 'dashed', // 将线条样式设置为虚线
          },
        },
        nameTextStyle: {
          align: 'right',
          padding: [0, 0, 10, 0],
          fontSize: 14,
          fontWeight: 'bold', // 加粗
          fontStyle: 'italic', // 斜体
          color: '#000', // 颜色
        },
      },
      series: [
        {
          name: "学习时长",
          type: "line",
          data: [5, 20, 36, 10, 10, 20, 5],
          itemStyle: {
            color: new echarts.graphic.LinearGradient(
                0, 0, 0, 1, // 表示渐变方向，从上到下
                [
                  { offset: 0, color: '#3E85E3' },
                  { offset: 1, color: '#96BDEE' }
                ]
            )
          }
        },
      ],
    });
  }
});

let props =defineProps<{name:string,month:string}>()
</script>

<template>
  <div ref="myChart" style="height: 240px; width: 100%;"></div>
</template>

<style scoped>

</style>